<template>
	<div id="top-content" :class="userSession == null? 'backNull':''">
      <div id="top">
        <img v-if="userSession != null" class="logo-img" src="../../assets/imgs/whitelogo.svg" />
        <img style="background:red" v-else class="logo-img" src="../../assets/imgs/whitelogo.svg" />
        <span class="menu-list">
          <a href="#/">首页</a>
        </span>
        <span v-if="userSession != null" class="menu-list" @mouseover="menuTwoTabshow"  @mouseout="menuTwoTabhide">
          版权内容仓库
          <ol class="CopyrightContent menu-two"  v-show="twoStatus"
            style="padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
            <li class="warehouse"><a @click="switchCopyrightMenu(0)">内容自动接入</a></li>
            <li class="warehouse"><a @click="switchCopyrightMenu(1)">版权内容仓库</a></li>
            <li class="warehouse"><a @click="switchCopyrightMenu(2)">著作权证书管理</a></li>
            <li class="warehouse"><a @click="switchCopyrightMenu(3)">著作权代办管理</a></li>
          </ol>
        </span>
        <span v-if="userSession != null" class="menu-list" @mouseover="menuThreeTabshow" @mouseout="menuThreeTabhide">
          版权咨询服务
          <ol class="CopyrightContent menu-two" v-show="threeStatus"
            style="padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
            <li class="warehouse">
              <a  @click="lawConsultionMenu()"> 专业法务咨询 </a>
            </li>
          </ol>
        </span>
        <span v-if="userSession != null" class="menu-list userL">
          账户管理
          <ol class="CopyrightContent menu-two" style="display:none;padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
            <li class="warehouse">
              <a @click="SetVuex(0)"> 主题管理 </a>
            </li>
            <li class="warehouse">
              <a @click="SetVuex(1)"> 消费管理 </a>
            </li>
            <li class="warehouse">
              <a @click="SetVuex(2)"> 用户管理 </a>
            </li>
          </ol>
        </span>
        <div v-if="userSession != null" id="login_info">
          <span class="login-status-info lolol">李大钊</span>
          <span class="login-status-info" @click="changePass">修改密码</span>
          <span class="login-status-info">帮助中心</span>
          <span class="login-status-info" @click="GoOutUser">退出</span>
        </div>
        <div v-else id="login_info" class="IsUser">
          <span class="login-status-info" @click="LoginUser">未登录用户</span>
          |&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="login-status-info">帮助中心</span>
        </div>
      </div>
      <!-- 修改密码 -->
      <div v-if="pass" class="changePass">
        <div class="L_Tp">
          <p>修改密码</p>
          <p class="cloosPass" @click="CloseePass">X</p>
          >
        </div>
        <div class="newOroldPass">
          <label>
            <span>旧密码：</span> <input v-model="Data.oldpass" type="password" name="oldpass" />
          </label>
          <label>
            <span>设置新密码：</span> <input v-model="Data.newpass" type="password" name="newpass" :disabled="show3"/>
          </label>
          <label>
            <span>确认新密码：</span> <input v-model="Data.newTwoPass" type="password" name="newTwoPass" :disabled="show4"/>
          </label>
          <div class="InforText">
            <i v-if="show1" class="C3 CC">{{showData}}</i>
            <i v-else class="C3 CC"></i>
          </div>
        </div>

        <div class="L_Fp">
          <p class="cloosPass" @click="CloseePass">取消</p>
          <p v-if="show2" class="CHANGEPASS disa" style="background:#999">确定</p>
          <p v-else class="CHANGEPASS" @click="SeverPass">确定</p>
        </div>
      </div>
      <!-- 退出登录 -->
      <div v-if="loginstatus" class="Lout">
        <div class="L_Tp">
            <p>登出提示</p>
            <p class="clooseS" @click="CloseLogin">X</p>>
        </div>
        <div class="L_Mp">
          <p>是否确定退出登录？</p>
        </div>
        <div class="L_Fp">
            <p class="clooseS" @click="CloseLogin">取消</p>
            <p class="BTN_lout">
              <a href="#" @click="BtnOk">确定</a>
            </p>
        </div>
      </div>
    </div>
</template>
<script scoped>
export default {
  name: "top",
  data() {
    return {
      twoStatus: false,
      threeStatus: false,
      userSession: null,
      pass: false,
      loginstatus: false,
      Data: {
        oldpass: "",
        newpass: "",
        newTwoPass: ""
      },
      show1: false,
      showData: "",
      show2: true,
      show3: true,
      show4: true
    };
  },
  watch: {
    "Data.oldpass": "TextsPass",
    "Data.newpass": "TextsPasss",
    "Data.newTwoPass": "TextsnewPasss"
  },
  methods: {
    //点击版权内存仓库
    menuTwoTabshow() {
      this.twoStatus = true;
    },
    menuTwoTabhide() {
      this.twoStatus = false;
    },
    menuThreeTabshow() {
      this.threeStatus = true;
    },
    menuThreeTabhide() {
      this.threeStatus = false;
    },
    //获取session
    async geyLsession() {
      this.userSession = window.localStorage.getItem("user");
    },
    //测试登录弹窗
    LoginUser() {
      window.localStorage.setItem("user", "1231");
      this.geyLsession();
    },
    //测试推出弹窗
    GoOutUser() {
      this.pass = false;
      this.loginstatus = true;
    },
    //修改密码弹窗
    changePass() {
      this.pass = true;
      this.loginstatus = false;
      this.showData = "";
    },
    //关闭密码弹窗
    CloseePass() {
      this.Data.oldpass = "";
      this.Data.newpass = "";
      this.Data.newTwoPass = "";
      this.show1 = false;
      this.show2 = false;
      this.pass = false;
    },
    // 弹窗
    BtnOk() {
      window.localStorage.setItem("user", null);
      this.userSession = null;
    },
    // 弹窗
    CloseLogin() {
      this.loginstatus = false;
    },
    //正则判断input
    TextsPass() {
      let Six = /^(\w|\D){6,16}$/;
      let Eng = /^[\D]/;

      if (this.show3 == false && this.show4 == false) {
        this.show2 = false;
      }
      if (!Eng.test(this.Data.oldpass.trim())) {
        this.Data.oldpass = "";
        this.show1 = true;
        this.show2 = true;
        this.show3 = true;
        this.showData = "输入请已字母开头";
        return false;
      }
      if (!Six.test(this.Data.oldpass.trim())) {
        this.show1 = true;
        this.show2 = true;
        this.show3 = true;
        this.show4 = true;
        this.showData = "输入至少6-16位";
        return false;
      } else {
        this.show1 = false;
        this.show3 = false;
        this.showData = "";
      }
    },
    TextsPasss() {
      if (this.Data.newTwoPass != this.Data.newpass) {
        this.show1 = true;
        this.show2 = true;
        this.showData = "两次密码不一致";
      }
      let Six = /^(\w|\D){6,16}$/;
      let Eng = /^[\D]/;
      if (!Eng.test(this.Data.newpass.trim())) {
        this.Data.newpass = "";
        this.show1 = true;
        this.show2 = true;
        this.show4 = true;
        this.showData = "新密码输入请已字母开头";
        return false;
      }
      if (!Six.test(this.Data.newpass.trim())) {
        this.show1 = true;
        this.show2 = true;
        this.show4 = true;
        this.showData = "新密码输入6-16位";
      } else {
        this.show1 = false;
        this.show4 = false;
        this.showData = "";
      }
    },
    TextsnewPasss() {
      let Six = /^(\w|\D){6,16}$/;
      let Eng = /^[\D]/;
      if (!Eng.test(this.Data.newTwoPass.trim())) {
        this.Data.newTwoPass = "";
        this.show1 = true;
        this.show2 = true;
        this.showData = "新密码输入请已字母开头";
        return false;
      }
      if (!Six.test(this.Data.newTwoPass.trim())) {
        this.show1 = true;
        this.showData = "新密码输入6-16位";
        return false;
      }
      if (this.Data.newTwoPass != this.Data.newpass) {
        this.show1 = true;
        this.show2 = true;
        this.showData = "两次密码不一致";
        return false;
      } else {
        this.show1 = false;
        this.showData = "";
        this.show2 = false;
      }
    },
    ///一下均为请求事件
    //修改密码Btn
    SeverPass() {
      console.log(this.Data);
    },
    SetVuex(num) {
      // console.log(this.$store.state.comm.ENTER)
      this.$store.commit("SET_I", num);
      switch (num) {
        case 0:
          this.$router.push({
            path: `/UserInfo/UserBase`,
            query: {
              type: num
            }
          });
          break;
        case 1:
          this.$router.push({
            path: `/UserInfo/UserPay`,
            query: {
              type: num
            }
          });
          break;
        case 2:
          this.$router.push({
            path: `/UserInfo/UserMussion`,
            query: {
              type: num
            }
          });
          break;
      }
    },
    // 切换版权内存仓库菜单
    switchCopyrightMenu(menuValue) {
      // console.log("menuValue="+menuValue)
      switch (menuValue) {
        case 0:
          this.$router.push({
            //核心语句
            path: "/copyRight/automaticAccess", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              activeStatus: menuValue
            }
          });
          break;
        case 1:
          this.$router.push({
            //核心语句
            path: "/copyRight/warehouse", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              activeStatus: menuValue
            }
          });
          break;
        case 2:
          this.$router.push({
            //核心语句
            path: "/copyRight/copyrightManage", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              activeStatus: menuValue
            }
          });
          break;
        case 3:
          this.$router.push({
            //核心语句
            path: "/copyRight/copyrightAgency", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              activeStatus: menuValue
            }
          });
          break;
      }
    },
		// 法务咨询
		lawConsultionMenu(){
			this.$router.push({
				//核心语句
				path: "/lawConsultionList", //跳转的路径
				query: {
					//路由传参时push和query搭配使用 ，作用时传递参数
					// activeStatus: 0
				}
			});
		}
  },

  beforeMount: function() {
    this.geyLsession();
  },
  mounted: function() {
    // console.log("7777777777")
  }
};
</script>
<style scoped>
@import "menu.css";
.CopyrightContent {
  top: 58px;
  color: #999;
  width: 158px;
  position: absolute;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 6px 0px 32px rgba(96, 129, 255, 0.16);
  z-index: 10;
  background: transparent;
  z-index: 9999;
  box-shadow: 0 0 1px gray;
  border-radius: 3px;
}
.CopyrightContent li:hover {
  background-color: #ccc;
}
.CopyrightContent li a {
  color: #999;
  display: block;
  font-size: 14px;
  font-weight: normal;
}
.warehouse {
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: #fff;
}
.backNull {
  background-color: #fff !important;
}
.backNull .menu-list {
  color: black !important;
}
.IsUser .login-status-info {
  color: gray !important;
  opacity: 0.6;
}
.userL:hover .CopyrightContent {
  display: block !important;
}
.disa {
  cursor: not-allowed !important;
}
</style>


